<template>
 <view>
    <music-head title="网易云音乐" :icon="true"></music-head>
    <view class="scroll-container">
      <scroll-view scroll-y="true">
        <view class="index-search" @tap="handleToSearch">
          <view>
            <text class="iconfont icon-sousuo"></text>
            <input type="text" placeholder="搜索歌曲" />
          </view>
        </view>

        <view class="index-list">
          <!-- <view class="index-list-item">
            <view class="index-list-img">
              <image src="/static/images/5b9a.jpg" mode=""></image>
              <text class="">每天更新</text>
            </view>
            <view class="index-list-text">
              <view>1.与我无关 - 阿戎</view>
              <view>1.与我无关 - 阿戎</view>
              <view>1.与我无关 - 阿戎</view>
            </view>
          </view> -->
          <view class="index-list-item" v-for="item in topList" :key="item.id" @tap="handleToList(item.id)">
            <view class="index-list-img">
              <image :src="item.coverImgUrl" mode="widthFix"></image>
              <text class="truncate">{{item.name}}</text>
            </view>
            <view class="index-list-text">
              <view v-for="(item, index) in item.tracks" :key="index">{{index+1}}.{{item.first}} - {{item.second}}</view>
            </view>
          </view>

          <view class="skeleton">
            <m-for-skeleton
              :avatarSize="200"
              :row="3"
              :loading="loading"
              isarc="square"
              v-for="(item,key) in 4"
              :key="key"
              :title="false">
            </m-for-skeleton>
          </view>
        </view>
      </scroll-view>
    </view>
 </view>
</template>

<script>
  import mForSkeleton from "@/components/m-for-skeleton/m-for-skeleton";
	import MusicHead from '../../components/musichead/musichead';
  import { topList } from '../../common/api.js'
export default {
	components: { MusicHead, mForSkeleton },
  data() {
   return {
     topList: [],
     loading: true
   }
  },
  methods: {
    handleToSearch() {
      uni.navigateTo({
        url: '/pages/music-search/index'
      });
    },
		handleToList(id) {
			uni.navigateTo({
			  url: '/pages/music-list/music-list?id=' + id 
			});
		}
  },
  onLoad() {
    topList().then((res) => {
      if(res.length) {
        this.topList = res;
        this.loading = false
      } else {
        this.loading = false
      }
    })
  }
}
</script>

<style scoped lang="less">
.index-search {
  padding: 46rpx 30rpx 30rpx;
  >view {
    display: flex;
    align-items: center;
    background: #f7f7f7;
    height: 70rpx;
    border-radius: 35rpx;
    overflow: hidden;
  }
  .iconfont {
    font-size: 34rpx;
    margin-right: 18rpx;
    margin-left: 28rpx;
  }
  input {
    flex: 1;
    font-size: 26rpx;
  }
}

.index-list { margin: 0 30rpx; }
.index-list-item { display: flex; margin-bottom: 34rpx; }
.index-list-img { 
  width: 212rpx; height: 212rpx; position: relative; 
  margin-right: 22rpx;
  border-radius: 10rpx;
  overflow: hidden;
  image { 
    width: 100%; height: 100%;
  }
  text {
    position: absolute;
    padding: 16rpx 12rpx;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 22rpx;
    color: #fff;
  }
}
.index-list-text {
  flex: 1;
  line-height: 66rpx;
  font-size: 24rpx;
}
</style>